/**
 * Created by cz on 2017/5/5.
 */
/**
 * Created by cz on 2017/5/5.
 */
import React,{Component} from "react";
import {
    View,
    Image,
    Text,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
    Alert
}from "react-native";
import NavigatorBar from "../../common/NavigatorBar";
import ViewUtils from "../../util/ViewUtils";
import CheckBox from "react-native-check-box";
import ArrayUtils from "../../util/ArrayUtils";
import LanguageDao,{FLAG_LANGUAGE} from "../../expand/dao/LanguageDao";
export default class CustomKeyPage extends Component{
    constructor(props){
        super(props);
        this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key);
        this.changeValues = [];
        this.state={
            dataArray:[]
        }
    }
    componentDidMount(){
        this.loadData();
    }
    loadData(){
        this.languageDao.fetch()
            .then(result=>{
                this.setState({
                    dataArray:result
                })
            })
            .catch(error=>{
                console.log(error)
            })
    }
    onSave(){
        if(this.changeValues.length === 0){
            this.props.navigator.pop();
            return;
        }
        this.languageDao.save(this.state.dataArray);
        this.props.navigator.pop();
    }
    onBack(){
        if(this.changeValues.length === 0){
            this.props.navigator.pop();
            return;
        }
        Alert.alert(
            '提示',
            '是否保存修改?',
            [
                {text: '不保存', onPress: () => {this.props.navigator.pop()}, style: 'cancel'},
                {text: '保存', onPress: () =>{this.onSave()}}
            ]
        )
    }
    renderView(){
        if(!this.state.dataArray || this.state.dataArray.length === 0)return null;
        let len = this.state.dataArray.length;
        let views = [];
        for(let i=0,l=len-2;i<l;i+=2){
            views.push(
                <View key={i}>
                    <View style={styles.item}>
                        {this.renderCheckBox(this.state.dataArray[i])}
                        {this.renderCheckBox(this.state.dataArray[i+1])}
                    </View>
                    <View style={styles.line}></View>
                </View>
            )
        }
        views.push(
            <View key={len-1}>
                <View style={styles.item}>
                    {len%2 === 0?this.renderCheckBox(this.state.dataArray[len-2]):null}
                    {this.renderCheckBox(this.state.dataArray[len-1])}
                </View>
                <View style={styles.line}></View>
            </View>
        );
        return views
    }
    onClick(data){
        data.checked = !data.checked;
        ArrayUtils.updataArray(this.changeValues,data)
    }
    renderCheckBox(data){
        let leftText = data.name;
        return <CheckBox
            style={{flex:1,padding:10}}
            onClick={()=>this.onClick(data)}
                leftText={leftText}
                isChecked={data.checked}
                checkedImage={<Image style={{tintColor:"#6495ED",width:22,height:22}} source={require("../../../img/checkBox_up.png")} />}
                unCheckedImage={<Image style={{tintColor:"#6495ED",width:22,height:22}} source={require("../../../img/checkBox_down.png")}/>}
        />
    }
    render(){
        let rightButton=<TouchableOpacity onPress={()=>this.onSave()}>
            <View style={{margin:10}}>
                <Text style={styles.title}>保存</Text>
            </View>
        </TouchableOpacity>
        return (
            <View style={styles.container}>
                <NavigatorBar
                    title="自定义标签"
                    style={{backgroundColor:"#6495ED"}}
                    leftButton={ViewUtils.getLeftButton(()=>{
                        this.onBack()
                    })}
                    rightButton={rightButton}
                />
                <ScrollView>
                    {this.renderView()}
                </ScrollView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1
    },
    tips:{
        fontSize:20
    },
    title:{
        fontSize:20,
        color:"#fff"
    },
    line:{
        height:1,
        backgroundColor:"#dddddd"
    },
    item:{
        flexDirection:"row",
        alignItems:"center"
    }
});